<template>
  <div class="searchContainer">
    <!-- 搜索框 -->
    <div class="searchInput" v-if="showSearchPages !== 2">
      <form action="/">
        <van-search
          v-model="inputKeyword"
          show-action
          placeholder="请输入商品名称"
          @search="onSearch"
          @cancel="onCancel"
          @input="changeInput"
        />
      </form>
    </div>
    <!-- searchPage1 -->
    <searchHistory v-show="showSearchPages === 0" :hotSearchList="hotSearchList" @initSearchResult="initSearchResult" ref="getTagsList"/>
    <!-- searchPage2 -->
    <searchList v-show="showSearchPages === 1" :liveSearchList="liveSearchList" @initSearchResult="initSearchResult" />
    <!-- <searchPage3 /> -->
    <searchResult v-show="showSearchPages === 2" ref="searchResult" @handleFocus="handleFocus"/>
  </div>
</template>

<script>
import { Toast } from "vant";
import searchHistory from "./components/SearchHistory";
import searchList from "./components/SearchList";
import searchResult from "./components/SearchResult";
import {reqHotSearchList,reqLiveSearch} from "@/api";
export default {
  name: 'search',
  data() {
    return {
      inputKeyword: "",//输入的关键字
      showSearchPages: 0,//控制显示那个搜索页的标识
      hotSearchList: [],//热门搜索列表
      liveSearchList: [],//实时搜索数据列表
      timer: null,//定时器
    };
  },
  components: { searchHistory,searchList,searchResult },

  //methods 方法
  methods: {
    // 修改页面显示状态--result
    async handleFocus(){
      this.showSearchPages = 1
      this.inputKeyword = this.$route.query.keyword//获取路径参数，回填给input
      const result = await reqLiveSearch(this.inputKeyword)
      this.liveSearchList = result.data
    },
    // 修改状态
    initSearchResult(searchKeyword){
      this.showSearchPages = 2
      this.$refs.searchResult.initData(searchKeyword)
      this.$router.push({
        path:"/search",//这个path就是你在router/index.js里边配置的路径
        query:{
          keyword:searchKeyword
        }
      })
    },
    // // 鼠标按下获取焦点时触发
    async handleInput(){
      const result = await reqLiveSearch(this.inputKeyword)
    },
    // 请求获取：热门搜索
    async getHotSearchList(){
      const result = await reqHotSearchList()
      if(result.code === '200') this.hotSearchList = result.data.hotKeywordVOList
    },

    // 实时搜索，防抖处理
    changeInput(){
      clearTimeout(this.timer)
      this.timer = setTimeout(async () =>{
         if(this.inputKeyword.length === 0){
          this.inputKeyword = ''
          this.showSearchPages = 0
          this.$refs.getTagsList.getTagsList()
        }else{
          this.showSearchPages = 1
          const result = await reqLiveSearch(this.inputKeyword)
          this.liveSearchList = result.data
        }
      },300) 
    },
    // 输入框按下回车键触发该事件
    onSearch(val) {
      Toast(val);
    },

    // 点击取消按钮触发事件
    onCancel() {
      // 返回上一页
      this.$router.go(-1);//返回上一层
    }
  },

  // 数据初始化mounted
  mounted(){
    // 搜索界面默认关键字和热门关键字数据初始化
    this.getHotSearchList()
    if(this.$route.query.keyword){
        this.initSearchResult(this.$route.query.keyword)
    }
  },
};
</script>

<style lang='less' scoped>
.searchContainer {
  height: 100%;
  .searchInput {
    .van-search {
      padding: 8px 15px;
      .van-search__content {
        padding-left: 10px;
        background-color: #f4f4f4;
      }
      .van-search__action {
        padding: 0 0 0 15px;
      }
      /deep/.van-icon.van-icon-search {
        font-size: 20px;
      }
      .van-cell {
        line-height: 28px;
        padding: 0;
      }
    }
  }
}
</style>